<template>
  <view class="wrap">
    <view class="header">
      <img class="headerBg" src="https://ainengli.hzjrsw.com/jkhx/homeBg.png" alt="" />
      <view class="info">
        <view class="image">
          <image
            class="img"
            v-if="state.userInfo && state.userInfo.gender == '女性'"
            src="@/static/image/woman.png"
            alt=""
          />
          <image class="img" v-else src="@/static/image/man.png" alt="" />
          <image
            v-if="state.userInfo && state.userInfo.isVip == true"
            class="isVip"
            src="@/static/image/vip.png"
            alt=""
          />
          <image
            v-if="state.userInfo && state.userInfo.isVip && !state.userInfo.hasVip"
            class="isVip"
            src="@/static/image/vip-expire.png"
            mode="scaleToFill"
          />
        </view>
        <view class="min">
          <text class="name">{{ state.userInfo && state.userInfo.patName }}</text>
          <!-- on  代表不是本人 -->
          <!-- <text v-if="state.userInfo && state.userInfo.relation == '本人'" class="relationship"
            >本人</text
          >
          <text v-else class="relationship on">配偶</text> -->
          <text
            v-if="state.userInfo && state.userInfo.relation !== null"
            :class="[
              'relationship',
              state.userInfo && state.userInfo.relation == '本人' ? '' : 'on'
            ]"
          >
            {{ state.userInfo.relation }}
          </text>
        </view>
        <view @tap="toFamily" class="right">
          <text class="patient">切换用户</text>
          <img class="switch" src="https://ainengli.hzjrsw.com/jkhx/switch.png" alt="" />
        </view>
      </view>
      <!-- 有没有管理计划 -->
      <view class="weight-vip" v-if="!state.userInfo.hasVip && !state.userInfo.questionState">
        <image class="server-box" src="@/static/image/server-box.png" mode="scaleToFill" />
        <image
          class="server"
          src="https://ainengli.hzjrsw.com/jkhx/weight/server.png"
          mode="scaleToFill"
        />
        <view class="weight-vip-box">
          <view class="weight-vip-top">
            <view class="weight-vip-left">
              <image class="server-icon" src="@/static/image/server-icon.png" mode="scaleToFill" />
              <text class="server-name">减重管理服务包</text>
            </view>
            <view @tap="toServerPackage" class="weight-vip-right">
              <text class="server-price">￥{{ amount / 100 }}/年</text>
            </view>
          </view>
          <view class="weight-vip-bottom">
            <view class="function-grid">
              <image class="fun-icon" src="@/static/image/fun-icon.png" mode="scaleToFill" />
              <text class="function-name">专业管理团队</text>
            </view>
            <view class="function-grid">
              <image class="fun-icon" src="@/static/image/fun-icon.png" mode="scaleToFill" />
              <text class="function-name">定制管理方案</text>
            </view>
            <view class="function-grid">
              <image class="fun-icon" src="@/static/image/fun-icon.png" mode="scaleToFill" />
              <text class="function-name">健康减重</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 有管理计划 -->
      <view
        v-if="
          (weightManagePlanData && state.userInfo.questionState) ||
          (state.userInfo.hasVip && !state.userInfo.isVip)
        "
      >
        <view class="manage">
          <view class="title">
            <image class="vip-bg-box" src="@/static/image/vip-bg-box.png" mode="scaleToFill" />
            <image
              class="vip-bg"
              v-if="!state.userInfo.hasVip"
              src="@/static/image/no-vip.png"
              mode="scaleToFill"
            />
            <image
              class="vip-bg"
              v-if="state.userInfo.isVip && state.userInfo.hasVip"
              src="@/static/image/vip-bg.png"
              mode="scaleToFill"
            />
            <image
              class="vip-bg"
              v-if="!state.userInfo.isVip && state.userInfo.hasVip"
              src="@/static/image/vip-bg-expire.png"
              mode="scaleToFill"
            />
            <view class="vip-main">
              <view>
                <image
                  v-if="state.userInfo.isVip && state.userInfo.hasVip"
                  class="vip-icon"
                  src="@/static/image/vip-icon.png"
                  mode="scaleToFill"
                />
                <image
                  class="vip-icon"
                  v-if="!state.userInfo.isVip && state.userInfo.hasVip"
                  src="@/static/image/vip-expire-icon.png"
                  mode="scaleToFill"
                />
                <text
                  class="vip-plan-name"
                  :style="{ color: state.userInfo.hasVip ? '#222' : '#fff' }"
                  >减重健康管理计划</text
                >
              </view>
              <text v-if="!state.userInfo.isVip && state.userInfo.hasVip" class="vip-expire-name">
                已过期
              </text>
            </view>
          </view>
          <view class="weight-box">
            <view class="weight-mana">
              <view>
                <text class="weight-basic-text">单位：kg</text>
              </view>
              <view class="reduced-weight">
                <text class="weight-basic-text">已减去</text>
                <text
                  :class="
                    !state.userInfo.isVip && state.userInfo.hasVip
                      ? 'weight-value weight-vip-expire'
                      : 'weight-value'
                  "
                  style="font-size: 56rpx"
                >
                  {{ getLoseWeight() }}
                </text>
                <text class="weight-basic-text">(kg)</text>
              </view>
              <view class="weight-progress">
                <!-- <text>进度条</text> -->
                <view
                  :class="
                    !state.userInfo.isVip && state.userInfo.hasVip
                      ? 'progress-bar progress-bar-expire'
                      : 'progress-bar'
                  "
                  :style="{ left: `calc(${weightPercent}% - 12rpx)` }"
                />
                <view
                  :class="
                    !state.userInfo.isVip && state.userInfo.hasVip
                      ? 'progress-bar-bg progress-bar-bg-expire'
                      : 'progress-bar-bg'
                  "
                  :style="{ width: `${weightPercent}%` }"
                />
              </view>
              <view class="weight-grid">
                <view class="weight-mode">
                  <text class="weight-basic-text">初始体重</text>
                  <text
                    :class="
                      !state.userInfo.isVip && state.userInfo.hasVip
                        ? 'weight-value weight-vip-expire'
                        : 'weight-value'
                    "
                    >{{ weightManagePlanData.originWeight || 0 }}</text
                  >
                </view>
                <view class="weight-mode">
                  <text class="weight-basic-text">当前体重</text>
                  <text
                    :class="
                      !state.userInfo.isVip && state.userInfo.hasVip
                        ? 'weight-value weight-vip-expire'
                        : 'weight-value'
                    "
                    >{{ weightManagePlanData.currentWeight || 0 }}</text
                  >
                </view>
                <view class="weight-mode">
                  <text class="weight-basic-text">目标体重</text>
                  <text
                    :class="
                      !state.userInfo.isVip && state.userInfo.hasVip
                        ? 'weight-value weight-vip-expire'
                        : 'weight-value'
                    "
                    >{{ weightManagePlanData.targetWeight || 0 }}</text
                  >
                </view>
              </view>
              <view @tap="toWeightManage">
                <text v-if="!state.userInfo.hasVip" class="clock-in">打卡今日健康任务</text>
                <text v-if="!state.userInfo.isVip && state.userInfo.hasVip" class="clock-expire-in"
                  >续费继续享受会员服务</text
                >
                <text v-if="state.userInfo.hasVip && state.userInfo.isVip" class="clock-in">
                  打卡今日健康任务
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--  -->
      <view
        class="list"
        :style="{
          marginTop: !state.userInfo.hasVip && !state.userInfo.questionState ? '-110rpx' : '24rpx'
        }"
      >
        <image
          class="big-function-box"
          src="@/static/image/big-function-box.png"
          mode="scaleToFill"
        />
        <view @tap="toRisk" class="item">
          <img class="itemBg" src="@/static/image/food-grid.png" alt="" />
          <view class="selfTest">
            <view class="selfTest-name">
              <text class="name">AI饮食方案</text>
              <text class="title">限免</text>
            </view>
            <text class="selfTest-title">营养搭配</text>
            <text class="selfTest-btn">去查看</text>
          </view>
        </view>
        <view @tap="toBody" class="item">
          <img class="itemBg" src="@/static/image/sport-grid.png" alt="" />
          <view class="selfTest">
            <view class="selfTest-name">
              <text class="name">运动方案</text>
              <text class="title">限免</text>
            </view>
            <text class="selfTest-title">量身定制</text>
            <text class="selfTest-btn" style="color: #00d1b6">去查看</text>
          </view>
        </view>
      </view>
    </view>
    <view class="listWrap">
      <view @tap="toSleep" class="item">
        <img class="image" src="@/static/image/sleep-icon.png" alt="" />
        <text class="name">睡眠指导</text>
      </view>
      <view class="item" @tap="toPsychology">
        <img class="image" src="@/static/image/mind-icon.png" alt="" />
        <text class="name">心理指导</text>
      </view>
      <view class="item" @tap="TraditionalCMGfun">
        <img class="image" src="@/static/image/medicine-icon.png" alt="" />
        <text class="name">中医指导</text>
      </view>
    </view>
    <view class="healthWrap">
      <view class="title">健康工具</view>
      <view class="healthWraps">
        <view @tap="healthMonitor" class="item">
          <image class="tool-icon" src="@/static/image/monitor-icon.png" mode="scaleToFill" />
          <view class="tool-right">
            <text class="name">健康监测</text>
            <text class="title">精准健康追踪</text>
          </view>
        </view>
        <view @tap="toDevice" class="item">
          <image class="tool-icon" src="@/static/image/equipment-icon.png" mode="scaleToFill" />
          <view class="tool-right">
            <text class="name">我的设备</text>
            <text class="title">智能健康护航</text>
          </view>
        </view>
        <view @tap="healthArchives" class="item">
          <image class="tool-icon" src="@/static/image/archives-icon.png" mode="scaleToFill" />
          <view class="tool-right">
            <text class="name">健康档案</text>
            <text class="title">健康历程追踪</text>
          </view>
        </view>
        <view @tap="toDiary" class="item">
          <image class="tool-icon" src="@/static/image/diary-icon.png" mode="scaleToFill" />
          <view class="tool-right">
            <text class="name">减重日记</text>
            <text class="title">体重管理日记</text>
          </view>
        </view>
      </view>
    </view>
    <view class="smart-set" @click="toAi">
      <view class="ai-bg" />
      <text class="ai-name">AI助理</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import store from '@/store'
import { getPatientInfo } from './index.api'
import { getProduct } from '@/api/hmm'
import { userInfo } from 'os'

interface weightManagePlan {
  empi: string
  originWeight: number
  targetWeight: number
  pathId: number
  qneFinishedTime: string
  buyProductTime: string
  currentWeight: number
}

const state = reactive({
  userInfo: {},
  getUserId: '',
  taskList: [],
  isRead: false
})

const weightManagePlanData = ref<weightManagePlan>()
const weightPercent = ref<number>(0)

const amount = ref<number>(0)

onShow(() => {
  state.isRead = false
  uni.removeStorageSync('healthManageTab')
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  state.getUserId = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).userId
    : ''

  console.log(state.userInfo, '个人信息')
  init()
})
const init = () => {
  //   uni.showLoading({
  //     title: '加载中'
  //   })
  // const param = state.userInfo.empi + '/' + state.getUserId

  getPatientInfo({ empi: state.userInfo.empi }).then((res: any) => {
    weightManagePlanData.value = res.data
    // console.log(weightManagePlanData.value)
    if (res.data) {
      weightPercent.value =
        Math.round(
          ((res.data.originWeight - res.data.currentWeight) /
            (res.data.originWeight - res.data.targetWeight)) *
            100 *
            10
        ) / 10

      if (weightPercent.value >= 100) {
        weightPercent.value = 100
      }
    }
  })

  getProduct({ productId: 'P_WEIGHT_LOSE' }).then((res: any) => {
    if (res.code == 0) {
      amount.value = res.data && res.data.amount ? res.data.amount.toFixed(2) : 0
    }
  })
}

// 获取已减重的值
const getLoseWeight = () => {
  let loseWeight = 0
  if (weightManagePlanData.value) {
    loseWeight =
      Math.round(
        (weightManagePlanData.value.originWeight - weightManagePlanData.value.currentWeight) * 10
      ) / 10
  }
  if (loseWeight > 0) {
    return loseWeight
  } else {
    return 0
  }
}

const toWeightManage = () => {
  if (!state.userInfo.isVip && state.userInfo.hasVip) {
    // 会员过期判断问卷是否填写
    if (!state.userInfo.questionState) {
      uni.navigateTo({ url: '/packA/pages/weightManage/serverPackage' })
    } else {
      uni.navigateTo({ url: '/packA/pages/weightManage/scheme' })
    }
  } else {
    uni.navigateTo({ url: '/packA/pages/weightManage/scheme' })
  }
}

const toServerPackage = () => {
  uni.navigateTo({ url: '/packA/pages/weightManage/serverPackage' })
}

const toRisk = () => {
  if (state.userInfo.dietQuestionState) {
    uni.navigateTo({ url: '/module/src/pages/food/smartFood/recommend' })
  } else {
    uni.navigateTo({ url: '/module/src/pages/food/smartFood/index' })
  }
}

const toBody = () => {
  uni.navigateTo({ url: '/packA/pages/sportsInformation/sportsGuide' })
}

const toSleep = () => {
  uni.navigateTo({ url: '/module/src/pages/sleep/index' })
}

const toDevice = () => {
  uni.navigateTo({ url: '/module/src/pages/myEquipment/index' })
}

const healthArchives = () => {
  uni.navigateTo({ url: '/packA/pages/moreMessage/index' })
}
const healthMonitor = () => {
  uni.navigateTo({ url: '/module/src/pages/healthPortrait/indexTwo' })
}

const toDiary = () => {
  uni.navigateTo({ url: '/packA/pages/healthDiary/index' })
}

const toFamily = () => {
  uni.navigateTo({ url: '/packA/pages/family/index' })
}

const toAi = () => {
  uni.navigateTo({ url: '/module/src/pages/aiassistant/index' })
}

const toPsychology = () => {
  uni.navigateTo({ url: '/module/src/pages/psychology/index' })
}
const TraditionalCMGfun = () => {
  uni.navigateTo({ url: '/module/src/pages/traditionalCMG/index' })
  //   uni.navigateTo({ url: '/packA/pages/traditionalCMG/recordDetail' })
}
</script>

<style lang="scss" scoped>
.cf {
  zoom: 1;
}

.cf::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  visibility: hidden;
  content: '.';
}

.wrap {
  min-height: 100vh;
  padding-bottom: 32rpx;

  .header {
    position: relative;
    // height: 330rpx;

    .headerBg {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
    }

    .info {
      position: relative;
      z-index: 2;
      display: inline-block;
      width: calc(750rpx - 64rpx);
      margin: 32rpx 32rpx 0;

      .image {
        position: relative;
        display: inline-block;
        width: 96rpx;
        height: 96rpx;
        vertical-align: middle;

        .img {
          display: block;
          width: 100%;
          height: 100%;
        }

        .isVip {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }

      .min {
        display: inline-block;
        margin-left: 24rpx;
        vertical-align: middle;

        .name {
          display: block;
          font-size: 36rpx;
          font-weight: 700;
          color: #222;
        }

        .relationship {
          display: inline-block;
          padding: 2rpx 24rpx;
          margin-top: 12rpx;
          font-size: 24rpx;
          color: #fff;
          background: linear-gradient(316deg, #00cfb4 0%, #0fe3c8 100%);
          border-radius: 18rpx 4rpx;

          &.on {
            background: #5c8eff;
          }
        }
      }

      .right {
        position: absolute;
        top: 0rpx;
        right: 0rpx;
        height: 50rpx;
        padding: 0 24rpx;
        line-height: 45rpx;
        background: #fff;
        border-radius: 50rpx;

        .patient {
          display: inline-block;
          height: auto;
          font-size: 24rpx;
          line-height: initial;
          color: #456465;
          vertical-align: middle;
        }

        .switch {
          display: inline-block;
          width: 24rpx;
          height: 24rpx;
          margin-left: 8rpx;
          vertical-align: middle;
        }
      }
    }

    .manage {
      position: relative;
      z-index: 2;
      height: 537.67rpx;
      padding: 0 32rpx;
      margin-top: 32rpx;

      .vip-bg-box {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 109.49rpx;
      }

      .vip-bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 109.49rpx;
      }

      .vip-main {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 44rpx;
      }

      .vip-icon {
        width: 32rpx;
        height: 28rpx;
        margin-right: 8rpx;
      }

      .vip-plan-name {
        font-size: 32rpx;
        font-weight: 700;
        color: #222;
      }

      .title {
        position: relative;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 109.49rpx;
        padding: 26rpx 32rpx 0;
        border-radius: 16rpx 16rpx 0 0;
      }

      .weight-box {
        position: absolute;
        top: 94rpx;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 443.67rpx;
        padding: 0 32rpx;

        .weight-mana {
          width: 100%;
          height: 100%;
          padding: 32rpx 32rpx 0;
          background: url('@/static/image/vip-plan-bg.png') no-repeat center;
          border-radius: 24rpx;

          .weight-basic-text {
            font-size: 24rpx;
            font-weight: 400;
            color: #666;
          }

          .reduced-weight {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 56rpx;
            margin-bottom: 30rpx;
          }

          .weight-value {
            margin: 0 8rpx;
            font-size: 40rpx;
            font-weight: 700;
            color: #222;
          }

          .weight-vip-expire {
            color: #666;
          }

          .weight-progress {
            position: relative;
            width: 100%;
            height: 12rpx;
            margin: 22rpx 0 24rpx;
            background: #f0f5f4;
            border-radius: 32rpx;

            .progress-bar {
              position: absolute;
              top: -6rpx;
              z-index: 2;
              width: 25rpx;
              height: 25rpx;
              background: linear-gradient(316deg, #00cfb4 0%, #0fe3c8 100%);
              border: 4rpx solid #e2fffb;
              border-radius: 50%;
            }

            .progress-bar-bg {
              position: absolute;
              top: 0;
              left: 0;
              z-index: 1;
              height: 12rpx;
              background: linear-gradient(316deg, #00cfb4 0%, #0fe3c8 100%), #f0f5f4;
              border-radius: 32rpx;
            }

            .progress-bar-expire {
              background: #ccc;
              border: 4rpx solid #f4f4f4;
            }

            .progress-bar-bg-expire {
              background: #ccc;
            }
          }

          .weight-number {
            font-size: 40rpx;
            font-weight: 600;
            color: #222;
          }

          .weight-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 16rpx;
            margin-bottom: 48rpx;

            .weight-mode {
              display: flex;
              flex-direction: column;
            }

            .weight-mode:nth-child(2) {
              text-align: center;
            }

            .weight-mode:nth-child(3) {
              text-align: right;
            }
          }
        }
      }
    }

    .weight-vip {
      position: relative;
      z-index: 2;
      height: 300rpx;
      padding: 0 32rpx;
      margin-top: 32rpx;
      border-radius: 16rpx;
    }

    .server-box {
      position: absolute;
      top: 0;
      left: 32rpx;
      z-index: 1;
      width: calc(100% - 64rpx);
      height: 236.69rpx;
    }

    .server {
      position: absolute;
      top: 0;
      left: 32rpx;
      z-index: 2;
      width: calc(100% - 64rpx);
      height: 236.69rpx;
    }

    .weight-vip-box {
      position: relative;
      z-index: 5;
      padding: 0 32rpx;
    }

    .weight-vip-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 114rpx;
      border-bottom: 1rpx solid #deb88e;
    }

    .server-icon {
      width: 32rpx;
      height: 32rpx;
    }

    .server-name {
      margin-left: 16rpx;
      font-size: 36rpx;
      font-weight: 600;
      color: #652200;
    }

    .weight-vip-right {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 160rpx;
      height: 48rpx;
      background: linear-gradient(95deg, #ff9a2d 0%, #ff4d00 100%);
      border-radius: 36rpx;

      .server-price {
        font-size: 26rpx;
        font-weight: 600;
        color: #fffdd2;
      }
    }

    .weight-vip-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 36rpx;
      margin-top: 18rpx;
    }

    .function-grid {
      display: flex;
      align-items: center;
    }

    .function-name {
      margin-left: 8rpx;
      font-size: 26rpx;
      font-weight: 600;
      color: #9f5300;
    }

    .fun-icon {
      width: 24rpx;
      height: 24rpx;
    }
  }

  .list {
    position: relative;
    z-index: 10;
    display: flex;
    gap: 24rpx;
    align-items: center;
    justify-content: space-between;
    // height: 217.19rpx;
    padding: 34rpx 32rpx 0;

    .big-function-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 200rpx;
    }

    .item {
      position: relative;
      width: 100%;
      height: 217.19rpx;

      .itemBg {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
      }

      .selfTest {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: center;
        height: 100%;
        padding-left: 32rpx;
        font-size: 24rpx;

        .selfTest-name {
          margin-bottom: 8rpx;
        }

        .selfTest-title {
          font-size: 26rpx;
          font-weight: 400;
          color: #666;
        }

        .selfTest-btn {
          display: inline-block;
          width: 104rpx;
          height: 48rpx;
          margin-top: 16rpx;
          line-height: 48rpx;
          color: #1a7cff;
          text-align: center;
          background: #fff;
          border-radius: 24rpx;
        }

        .name {
          width: 168rpx;
          height: 48rpx;
          font-size: 34rpx;
          font-weight: 700;
          color: #222;
        }

        .title {
          display: inline-block;
          width: 72rpx;
          height: 40rpx;
          margin-left: 16rpx;
          font-size: 24rpx;
          font-weight: 600;
          line-height: 40rpx;
          color: #fff;
          text-align: center;
          background: linear-gradient(138deg, #ffc49f 0%, #ff2600 100%);
          border-radius: 20rpx;
        }
      }

      // &:nth-child(2) {
      //   .selfTest {
      //     .name {
      //       text-shadow: 0 2px 2px #00a892;
      //     }
      //   }
      // }
    }
  }

  .listWrap {
    display: flex;
    gap: 48rpx;
    align-content: space-between;
    align-items: center;
    padding: 32rpx 24rpx;
    margin: 32rpx 32rpx 0;
    background: #fff;
    border-radius: 16rpx;

    .item {
      width: 100%;

      .image {
        display: block;
        width: 84rpx;
        height: 84rpx;
        margin: 0 auto;
      }

      .name {
        display: block;
        margin-top: 18rpx;
        font-size: 30rpx;
        color: #222;
        text-align: center;
      }
    }
  }

  .healthWrap {
    padding: 32rpx 24rpx;
    margin: 32rpx;
    background: #fff;
    border-radius: 16rpx;

    .title {
      font-size: 36rpx;
      font-weight: 700;
      color: #222;
    }

    .healthWraps {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22rpx;
      align-content: space-between;
      align-items: center;
      margin-top: 24rpx;

      .item {
        display: flex;
        align-items: center;
        width: 100%;
        height: 120rpx;
        padding: 24rpx 20rpx;
        background: #fafafa;
        border: 1rpx solid #f1f1f1;
        border-radius: 16rpx;

        .tool-icon {
          width: 64rpx;
          height: 64rpx;
          margin-right: 16rpx;
        }

        .tool-right {
          display: flex;
          flex-direction: column;

          .title {
            font-size: 24rpx;
            font-weight: 400;
            color: #666;
          }

          .name {
            margin-top: 4rpx;
            font-size: 30rpx;
            font-weight: 700;
            color: #222;
          }
        }
      }
    }
  }
}

.smart-set {
  position: fixed;
  right: 24rpx;
  bottom: 120rpx;
  z-index: 98;

  .ai-bg {
    width: 97.4rpx;
    height: 91.25rpx;
    margin: 0 auto;
    background: url('@/static/image/ai.png') no-repeat center;
    background-size: 100% 100%;
  }

  .ai-name {
    display: inline-block;
    width: 108rpx;
    height: 40rpx;
    margin-top: 14rpx;
    font-size: 24rpx;
    font-weight: 600;
    line-height: 40rpx;
    color: #fff;
    text-align: center;
    background: linear-gradient(316deg, #00cfb4 0%, #0fe3c8 100%);
    border-radius: 24rpx;
  }
}

.clock-in {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 622rpx;
  height: 84rpx;
  font-size: 30rpx;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(316deg, #00cfb4 0%, #0fe3c8 100%);
  border-radius: 16rpx;
}

.clock-expire-in {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 622rpx;
  height: 84rpx;
  font-size: 30rpx;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(95deg, #ff9a2d 0%, #ff4d00 100%);
  border-radius: 16rpx;
}

.vip-expire-name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96rpx;
  height: 48rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #222;
  background: rgb(255 255 255 / 80%);
  border: 1rpx solid #fff;
  border-radius: 4rpx;
}
</style>
